﻿<!DOCTYPE html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Product Layout Style1 - Shoplook Multipurpose eCommerce Bootstrap5 Html Template</title>
    <meta name="description" content="description">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Favicon -->
    <link rel="shortcut icon" th:href="@{/assets/images/favicon.png}"/>
    <!-- Plugins CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/plugins.css}">
    <!-- Main Style CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/style.css}">
    <link rel="stylesheet" th:href="@{/assets/css/responsive.css}">
    <link rel="stylesheet" th:href="@{/assets/lib/layui/css/layui.css}">
</head>
<body class="template-product">
<!--Pre-Loader-->
<div id="pre-loader" class="preloader">
    <div class="preloader-in h2">
        <span>S</span><span>H</span><span>O</span><span>P</span><span>L</span><span>O</span><span>O</span><span>K</span>
    </div>
</div>
<!--End Pre-Loader-->
<div class="page-wrapper">
    <!--引入片段-->
    <div th:replace="~{include_header::header}"></div>

    <div id="page-content">
        <!--Body Container-->
        <!--Page Header-->
        <div class="page-header" th:style="|background-image: url(@{/assets/images/page-header/page-banner2.jpg})|">
            <div class="page-title"><h1>Product Layout Style1</h1></div>
            <!--Breadcrumbs-->
            <div class="breadcrumbs-wrapper">
                <div class="container">
                    <div class="breadcrumbs"><a href="index.html" title="Back to the home page"><i
                            class="an an-home icon-home"></i></a> <span aria-hidden="true"><i
                            class="an an-angle-right"></i></span> <span>Product Layout Style1</span></div>
                </div>
            </div>
            <!--End Breadcrumbs-->
        </div>
        <!--End Page Header-->
        <div class="container">
            <div class="product-detail-container">
                <div class="product-single">
                    <div class="row">
                        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                            <div class="product-details-img">
                                <div class="product-thumb">
                                    <div id="gallery" class="product-dec-slider-2 product-tab-left">
                                        <a data-image="assets/images/product-images/elt-p-1.jpg"
                                           data-zoom-image="assets/images/product-images/elt-p-1.jpg"
                                           class="slick-slide slick-cloned" data-slick-index="-4" aria-hidden="true"
                                           tabindex="-1">
                                            <img class="blur-up lazyload"
                                                 data-src="assets/images/product-images/elt-p-1.jpg"
                                                 src="assets/images/product-images/elt-p-1.jpg" alt=""/>
                                        </a>
                                        <a data-image="assets/images/product-images/elt-p-1-1.jpg"
                                           data-zoom-image="assets/images/product-images/elt-p-1-1.jpg"
                                           class="slick-slide slick-cloned" data-slick-index="-3" aria-hidden="true"
                                           tabindex="-1">
                                            <img class="blur-up lazyload"
                                                 data-src="assets/images/product-images/elt-p-1-1.jpg"
                                                 src="assets/images/product-images/elt-p-1-1.jpg" alt=""/>
                                        </a>
                                        <a data-image="assets/images/product-images/elt-p-1-2.jpg"
                                           data-zoom-image="assets/images/product-images/elt-p-1-2.jpg"
                                           class="slick-slide slick-cloned" data-slick-index="-2" aria-hidden="true"
                                           tabindex="-1">
                                            <img class="blur-up lazyload"
                                                 data-src="assets/images/product-images/elt-p-1-2.jpg"
                                                 src="assets/images/product-images/elt-p-1-2.jpg" alt=""/>
                                        </a>
                                        <a data-image="assets/images/product-images/elt-p-1-3.jpg"
                                           data-zoom-image="assets/images/product-images/elt-p-1-3.jpg"
                                           class="slick-slide slick-cloned" data-slick-index="-1" aria-hidden="true"
                                           tabindex="-1">
                                            <img class="blur-up lazyload"
                                                 data-src="assets/images/product-images/elt-p-1-3.jpg"
                                                 src="assets/images/product-images/elt-p-1-3.jpg" alt=""/>
                                        </a>
                                        <a data-image="assets/images/product-images/elt-p-1-3-1.jpg"
                                           data-zoom-image="assets/images/product-images/elt-p-1-3-1.jpg"
                                           class="slick-slide slick-cloned" data-slick-index="0" aria-hidden="true"
                                           tabindex="-1">
                                            <img class="blur-up lazyload"
                                                 data-src="assets/images/product-images/elt-p-1-3-1.jpg"
                                                 src="assets/images/product-images/elt-p-1-3-1.jpg" alt=""/>
                                        </a>
                                        <a data-image="assets/images/product-images/elt-p-0.jpg"
                                           data-zoom-image="assets/images/product-images/elt-p-0.jpg"
                                           class="slick-slide slick-cloned" data-slick-index="1" aria-hidden="true"
                                           tabindex="-1">
                                            <img class="blur-up lazyload"
                                                 data-src="assets/images/product-images/elt-p-0.jpg"
                                                 src="assets/images/product-images/elt-p-0.jpg" alt=""/>
                                        </a>
                                        <a data-image="assets/images/product-images/elt-p-1-3-2.jpg"
                                           data-zoom-image="assets/images/product-images/elt-p-1-3-2.jpg"
                                           class="slick-slide slick-cloned" data-slick-index="2" aria-hidden="true"
                                           tabindex="-1">
                                            <img class="blur-up lazyload"
                                                 data-src="assets/images/product-images/elt-p-1-3-2.jpg"
                                                 src="assets/images/product-images/elt-p-1-3-2.jpg" alt=""/>
                                        </a>
                                        <a data-image="assets/images/product-images/elt-p-1-3-3.jpg"
                                           data-zoom-image="assets/images/product-images/elt-p-1-3-3.jpg"
                                           class="slick-slide slick-cloned" data-slick-index="3" aria-hidden="true"
                                           tabindex="-1">
                                            <img class="blur-up lazyload"
                                                 data-src="assets/images/product-images/elt-p-1-3-3.jpg"
                                                 src="assets/images/product-images/elt-p-1-3-3.jpg" alt=""/>
                                        </a>
                                        <a data-image="assets/images/product-images/elt-p-1-3-4.jpg"
                                           data-zoom-image="assets/images/product-images/elt-p-1-3-4.jpg"
                                           class="slick-slide slick-cloned" data-slick-index="4" aria-hidden="true"
                                           tabindex="-1">
                                            <img class="blur-up lazyload"
                                                 data-src="assets/images/product-images/elt-p-1-3-4.jpg"
                                                 src="assets/images/product-images/elt-p-1-3-4.jpg" alt=""/>
                                        </a>
                                        <a data-image="assets/images/product-images/elt-p-1-3-5.jpg"
                                           data-zoom-image="assets/images/product-images/elt-p-1-3-5.jpg"
                                           class="slick-slide slick-cloned" data-slick-index="5" aria-hidden="true"
                                           tabindex="-1">
                                            <img class="blur-up lazyload"
                                                 data-src="assets/images/product-images/elt-p-1-3-5.jpg"
                                                 src="assets/images/product-images/elt-p-1-3-5.jpg" alt=""/>
                                        </a>
                                        <a data-image="assets/images/product-images/elt-p-1-3-6.jpg"
                                           data-zoom-image="assets/images/product-images/elt-p-1-3-6.jpg"
                                           class="slick-slide slick-cloned" data-slick-index="6" aria-hidden="true"
                                           tabindex="-1">
                                            <img class="blur-up lazyload"
                                                 data-src="assets/images/product-images/elt-p-1-3-6.jpg"
                                                 src="assets/images/product-images/elt-p-1-3-6.jpg" alt=""/>
                                        </a>
                                    </div>
                                </div>
                                <div class="zoompro-wrap product-zoom-right pl-20">
                                    <div class="zoompro-span">
                                        <img id="zoompro" class="zoompro" src="assets/images/product-images/elt-p-1.jpg"
                                             data-zoom-image="assets/images/product-images/elt-p-1.jpg" alt=""/>
                                    </div>
                                    <div class="product-labels"><span class="lbl pr-label1">new</span></div>
                                    <div class="product-buttons">
                                        <a href="#" class="btn prlightbox" title="Zoom">
                                            <i class="icon an an-expand" aria-hidden="true"></i>
                                            <span class="tooltip-label">Zoom Image</span>
                                        </a>
                                    </div>
                                </div>
                                <div class="lightboximages">
                                    <a href="assets/images/product-images/elt-p-1.jpg" data-size="1000x1280"></a>
                                    <a href="assets/images/product-images/elt-p-1-1.jpg" data-size="1000x1280"></a>
                                    <a href="assets/images/product-images/elt-p-1-2.jpg" data-size="1000x1280"></a>
                                    <a href="assets/images/product-images/elt-p-1-3.jpg" data-size="1000x1280"></a>
                                    <a href="assets/images/product-images/elt-p-1-3-1.jpg" data-size="1000x1280"></a>
                                    <a href="assets/images/product-images/elt-p-0.jpg" data-size="1000x1280"></a>
                                    <a href="assets/images/product-images/elt-p-1-3-2.jpg" data-size="1000x1280"></a>
                                    <a href="assets/images/product-images/elt-p-1-3-3.jpg" data-size="1000x1280"></a>
                                    <a href="assets/images/product-images/elt-p-1-3-4.jpg" data-size="1000x1280"></a>
                                    <a href="assets/images/product-images/elt-p-1-3-5.jpg" data-size="1000x1280"></a>
                                    <a href="assets/images/product-images/elt-p-1-3-6.jpg" data-size="1000x1280"></a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                            <div class="product-single__meta">
                                <h1 class="product-single__title" th:text="${good.name}">Product Layout Style1</h1>

                                <div class="prInfoRow d-flex justify-content-between">
                                    <div class="product-review"><a class="reviewLink" href="#tab2"><i
                                            class="an an-star"></i><i class="an an-star"></i><i
                                            class="an an-star"></i><i class="an an-star gray-star"></i><i
                                            class="an an-star gray-star"></i><span
                                            class="review-label"> 6 Reviews</span></a> | <a href="#;">Write a review</a>
                                    </div>
                                    <div class="product-sku"><b>SKU:</b> <span class="variant-sku" th:text="${good.id}">ELE-#0001</span>
                                    </div>
                                    <div class="product-stock"><b>Availability:</b>
                                        <span th:if="${good.stock>0}" class="instock">In Stock</span>
                                        <span th:unless="${good.stock>0}" class="outstock hide">Unavailable</span>
                                    </div>
                                </div>
                                <div class="brands"><b>Brand:</b> <span>Samsung</span>
                                </div>
                                <p class="product-single__price product-single__price-product-template">
                                            <span class="product-price__old" th:if="${good.marketPrice}">
                                                <span th:text="|&yen;${good.marketPrice}|">$600.00</span>
                                            </span>
                                    <span class="product-price__price product-price__price-product-template product-price__sale product-price__sale--single">
                                                <span class="money" th:text="|&yen;${good.price ?: 0}|">$500.00</span>
                                            </span>
                                </p>
                                <div class="orderMsg" data-user="23" data-time="24">
                                    <p><i class="an an-lg an-fire-alt"></i> <strong class="items">5</strong> sold in
                                        last <strong class="time">26</strong> hours</p>
                                </div>
                            </div>
                            <div id="quantity_message">Hurry! Only <span class="items">4</span> left in stock.</div>
                            <!-- countdown start -->
                            <div class="saleTime product-countdown" data-countdown="2049/03/01"></div>
                            <!-- countdown end -->
                            <hr>
                            <!--Sort Description-->
                            <div class="product-single__description rte">
                                <div class="row">
                                    <div class="col-12 col-sm-12 col-md-12 col-lg-12 mb-2">
                                        <p>Typi non habent claritatem insitam, est usus legentis in iis qui facit eorum
                                            claritatem. Investigationes demonstraverunt lectores legere me lius quod ii
                                            legunt saepius.</p>
                                    </div>
                                    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
                                        <ul class="list-items">
                                            <li>Lorem ipsum dolor sit amet</li>
                                            <li>Sed ut perspiciatis unde omnis</li>
                                        </ul>
                                    </div>
                                    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
                                        <ul class="list-items">
                                            <li>Neque porro quisquam est qui dolorem</li>
                                            <li>Lorem Ipsum is not simply random.</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <!--End Sort Description-->
                            <hr>
                            <form method="post" action="/cart/add" id="product_form_10508262282" accept-charset="UTF-8"
                                  class="product-form product-form-product-template hidedropdown"
                                  enctype="multipart/form-data">
                                <div class="swatch clearfix swatch-0 option1" data-option-index="0">
                                    <div class="product-form__item">
                                        <label class="label">Color:<span class="required">*</span> <span
                                                class="slVariant">Red</span></label>
                                        <div data-value="Red" class="swatch-element color red available">
                                            <input class="swatchInput" id="swatch-0-red" type="radio" name="option-0"
                                                   value="Red">
                                            <label class="swatchLbl color medium" for="swatch-0-red"
                                                   style="background-image:url(assets/images/swatches/blue-red.jpg);"></label>
                                            <span class="tooltip-label">Blue-Red</span>
                                        </div>
                                        <div data-value="Blue" class="swatch-element color blue available">
                                            <input class="swatchInput" id="swatch-0-blue" type="radio" name="option-0"
                                                   value="Blue">
                                            <label class="swatchLbl color medium" for="swatch-0-blue"
                                                   style="background-image:url(assets/images/swatches/grey-black.jpg);"></label>
                                            <span class="tooltip-label">Grey-Black</span>
                                        </div>
                                        <div data-value="Green" class="swatch-element color green available">
                                            <input class="swatchInput" id="swatch-0-green" type="radio" name="option-0"
                                                   value="Green">
                                            <label class="swatchLbl color medium" for="swatch-0-green"
                                                   style="background-image:url(assets/images/swatches/pink-black.jpg);"></label>
                                            <span class="tooltip-label">Pink-Black</span>
                                        </div>
                                        <div data-value="Gray" class="swatch-element color gray unavailable">
                                            <input class="swatchInput" id="swatch-0-gray" type="radio" name="option-0"
                                                   value="Gray">
                                            <label class="swatchLbl color medium" for="swatch-0-gray"
                                                   style="background-image:url(assets/images/swatches/black-gray.jpg);"></label>
                                            <span class="tooltip-label">Black-Gray</span>
                                        </div>
                                        <div data-value="aqua" class="swatch-element color aqua available">
                                            <input class="swatchInput" id="swatch-0-aqua" type="radio" name="option-0"
                                                   value="aqua">
                                            <label class="swatchLbl color medium" for="swatch-0-aqua"
                                                   style="background-image:url(assets/images/swatches/red-gray.jpg);"></label>
                                            <span class="tooltip-label">Red-Gray</span>
                                        </div>
                                        <div data-value="Orange" class="swatch-element color orange available">
                                            <input class="swatchInput" id="swatch-0-orange" type="radio" name="option-0"
                                                   value="Orange">
                                            <label class="swatchLbl color medium" for="swatch-0-orange"
                                                   style="background-image:url(assets/images/swatches/blue-gray.jpg);"></label>
                                            <span class="tooltip-label">Blue-Gray</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="swatch clearfix swatch-1 option2" data-option-index="1">
                                    <div class="product-form__item">
                                        <label class="label">Size:<span class="required">*</span> <span
                                                class="slVariant">XS</span>
                                            <a href="#sizechart" title="Size Chart" class="sizelink"
                                               data-bs-toggle="modal" data-bs-target="#sizechart"><i
                                                    class="an an-lg an-ruler"></i> Size Guide</a>
                                        </label>
                                        <div data-value="XS" class="swatch-element xs available">
                                            <input class="swatchInput" id="swatch-1-xs1" type="radio" name="option-1"
                                                   value="XS">
                                            <label class="swatchLbl medium" for="swatch-1-xs1" title="XS">XS</label>
                                            <span class="tooltip-label">XS</span>
                                        </div>
                                        <div data-value="S" class="swatch-element s available">
                                            <input class="swatchInput" id="swatch-1-s" type="radio" name="option-1"
                                                   value="S">
                                            <label class="swatchLbl medium" for="swatch-1-s" title="S">S</label>
                                            <span class="tooltip-label">S</span>
                                        </div>
                                        <div data-value="M" class="swatch-element m available">
                                            <input class="swatchInput" id="swatch-1-m1" type="radio" name="option-1"
                                                   value="M">
                                            <label class="swatchLbl medium" for="swatch-1-m1" title="M">M</label>
                                            <span class="tooltip-label">M</span>
                                        </div>
                                        <div data-value="L" class="swatch-element l available">
                                            <input class="swatchInput" id="swatch-1-l1" type="radio" name="option-1"
                                                   value="L">
                                            <label class="swatchLbl medium" for="swatch-1-l1" title="L">L</label>
                                            <span class="tooltip-label">L</span>
                                        </div>
                                        <div data-value="XL" class="swatch-element xl available">
                                            <input class="swatchInput" id="swatch-1-xl" type="radio" name="option-1"
                                                   value="XL">
                                            <label class="swatchLbl medium" for="swatch-1-xl" title="XL">XL</label>
                                            <span class="tooltip-label">XL</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- Product Action -->
                                <div class="product-action clearfix">
                                    <div class="product-form__item--quantity">
                                        <div class="wrapQtyBtn">
                                            <div class="qtyField">
                                                <a class="qtyBtn minus" href="javascript:void(0);"><i
                                                        class="an an-minus" aria-hidden="true"></i></a>
                                                <input type="text" id="good-qty" name="quantity" value="1"
                                                       class="product-form__input qty">
                                                <a class="qtyBtn plus" href="javascript:void(0);"><i class="an an-plus"
                                                                                                     aria-hidden="true"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="product-form__item--submit">

                                        <!--添加到购物车-->
                                        <button id="addToCartBtn" type="button" name="add"
                                                class="btn product-form__cart-submit">
                                            <i class="icon an an-lg an-shopping-cart"></i> <span>添加到购物车</span>
                                        </button>

                                        <!--秒杀按钮-->
                                        <button th:if="false" id="seckillBtn" type="button"
                                                class="btn product-form__cart-submit">
                                            <i class="icon an an-lg an-shopping-cart"></i> <span>秒杀</span>
                                        </button>
                                    </div>
                                    <div class="agree-check">
                                        <input type="checkbox" name="tearm" id="prTearm" class="checkbox" value="tearm"
                                               required>
                                        <label for="prTearm"><span class="checkbox"></span> I agree with the terms and
                                            conditions</label>
                                    </div>
                                    <div class="buy-it-btn">
                                        <button type="button" class="btn" disabled="disabled">Buy it now</button>
                                    </div>
                                </div>
                                <!-- End Product Action -->
                            </form>
                            <p class="infolinks d-flex">
                                <a class="wishlist add-to-wishlist" href="my-wishlist.html" title="Add to Wishlist"><i
                                        class="icon an an-lg an-heart-o" aria-hidden="true"></i>
                                    <span>Add to Wishlist</span></a>
                                <a class="wishlist add-to-wishlist" href="compare-style1.html" title="Add to Compare"><i
                                        class="icon an an-lg an-balance-scale" aria-hidden="true"></i> <span>Add to Compare</span></a>
                                <a href="#ShippingInfo" title="Delivery &amp; Returns" class="shippingInfo btn"
                                   data-bs-toggle="modal" data-bs-target="#ShippingInfo"><i
                                        class="icon an an-lg an-truck"></i> Delivery &amp; Returns</a>
                                <a href="#productInquiry" title="Product Inquiry" class="emaillink btn"
                                   data-bs-toggle="modal" data-bs-target="#productInquiry"><i
                                        class="icon an an-lg an-envelope"></i> Enquiry</a>
                            </p>

                            <div class="social-sharing">
                                <span class="label">Share:</span>
                                <a href="#" class="btn btn--small btn--secondary btn--share share-facebook"
                                   title="Share on Facebook">
                                    <i class="icon an an-facebook-f"></i>
                                </a>
                                <a href="#" class="btn btn--small btn--secondary btn--share share-twitter"
                                   title="Tweet on Twitter">
                                    <i class="icon an an-twitter"></i>
                                </a>
                                <a href="#" title="Share on google+" class="btn btn--small btn--secondary btn--share">
                                    <i class="an an-google-plus" aria-hidden="true"></i>
                                </a>
                                <a href="#" class="btn btn--small btn--secondary btn--share share-pinterest"
                                   title="Pin on Pinterest">
                                    <i class="icon an an-pinterest-p"></i>
                                </a>
                                <a href="#" class="btn btn--small btn--secondary btn--share" title="WhatsApp">
                                    <i class="icon an an-whatsapp"></i>
                                </a>
                                <a href="#" class="btn btn--small btn--secondary btn--share" title="RSS">
                                    <i class="icon an an-rss"></i>
                                </a>
                                <a href="#" class="btn btn--small btn--secondary btn--share" title="Share by Email">
                                    <i class="an an-envelope" aria-hidden="true"></i>
                                </a>
                            </div>

                            <div class="trustseal-img"><img src="assets/images/checkout-cards.png" alt=""></div>
                            <p id="freeShipMsg" class="freeShipMsg" data-price="199"><i class="an an-lg an-truck"
                                                                                        aria-hidden="true"></i> Getting
                                Closer! Only <b class="freeShip"><span class="money" data-currency-usd="$199.00"
                                                                       data-currency="USD">$199.00</span></b> Away From
                                <b>FREE SHIPPING!</b></p>
                            <p class="shippingMsg"><i class="an an-lg an-clock" aria-hidden="true"></i> Estimated
                                Delivery Between <b id="fromDate">Wed. May 1</b> and <b id="toDate">Tue. May 7</b>.</p>
                            <div class="userViewMsg" data-user="20" data-time="11000">
                                <i class="an an-lg an-user-friends" aria-hidden="true"></i> <strong
                                    class="uersView">14</strong> People are Looking for this Product
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--Product Tabs-->
            <div class="tabs-listing tabs-listing-style2">
                <ul class="product-tabs text-left">
                    <li rel="tab1" class="active"><a class="tablink">Product Details</a></li>
                    <li rel="tab2"><a class="tablink">Reviews (3)</a></li>
                    <li rel="tab3"><a class="tablink">Additional information</a></li>
                    <li rel="tab4"><a class="tablink">Shipping &amp; Returns</a></li>
                    <li rel="tab5"><a class="tablink">Custom Tab</a></li>
                </ul>
                <div class="tab-container">
                    <h3 class="tabs-ac-style active" rel="tab1">Product Details</h3>
                    <div id="tab1" class="tab-content">
                        <div class="product-description rte">
                            <div class="row" th:utext="${good.description}">

                            </div>
                        </div>
                    </div>

                    <h3 class="tabs-ac-style" rel="tab2">Review (3)</h3>
                    <div id="tab2" class="tab-content">
                        <div class="row">
                            <div class="col-12 col-sm-12 col-md-6 col-lg-6 mb-4">
                                <div class="spr-form clearfix">
                                    <form method="post" action="#" id="new-review-form" class="new-review-form">
                                        <h3 class="spr-form-title">Write Your Own Review</h3>
                                        <fieldset class="spr-form-contact">
                                            <div class="spr-form-review-rating">
                                                <label class="spr-form-label">How do you rate this product?<span
                                                        class="required">*</span></label>
                                                <div class="spr-form-input spr-starrating">
                                                    <div class="product-review"><a class="reviewLink" href="#"><i
                                                            class="an an-lg an-star"></i><i
                                                            class="an an-lg an-star"></i><i
                                                            class="an an-lg an-star"></i><i
                                                            class="an an-lg an-star"></i><i
                                                            class="an an-lg an-star"></i></a></div>
                                                </div>
                                            </div>
                                            <div class="spr-form-contact-name">
                                                <label class="spr-form-label">What's your nickname?<span
                                                        class="required">*</span></label>
                                                <input class="spr-form-input spr-form-input-text" type="text"
                                                       name="name" value="">
                                            </div>
                                            <div class="spr-form-contact-email">
                                                <label class="spr-form-label" for="email">Email Address<span
                                                        class="required">*</span></label>
                                                <input class="spr-form-input spr-form-input-email " id="email"
                                                       type="email" name="email" value="">
                                            </div>
                                        </fieldset>
                                        <fieldset class="spr-form-review">
                                            <div class="spr-form-review-title">
                                                <label class="spr-form-label" for="review">Review Title</label>
                                                <input class="spr-form-input spr-form-input-text " id="review"
                                                       type="text" name="review" value="">
                                            </div>

                                            <div class="spr-form-review-body">
                                                <label class="spr-form-label" for="message">Body of Review <span
                                                        class="spr-form-review-body-charactersremaining">(1500) characters remaining</span></label>
                                                <div class="spr-form-input">
                                                    <textarea class="spr-form-input spr-form-input-textarea "
                                                              id="message" name="message" rows="5"></textarea>
                                                </div>
                                            </div>
                                        </fieldset>
                                        <div class="spr-form-actions">
                                            <input type="submit"
                                                   class="spr-button spr-button-primary button button-primary btn btn-primary"
                                                   value="Submit Review">
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div class="col-12 col-sm-12 col-md-6 col-lg-6">
                                <div class="spr-reviews">
                                    <h3 class="spr-form-title">Customer Reviews</h3>
                                    <p><span class="product-review spr-starratings spr-review-header-starratings"><span
                                            class="reviewLink"><i class="an an-lg an-star"></i><i
                                            class="an an-lg an-star"></i><i class="an an-lg an-star"></i><i
                                            class="an an-lg an-star gray-star"></i><i
                                            class="an an-lg an-star gray-star"></i></span></span> <b>4.5 (Overall)</b> |
                                        Based on 5 Comments</p>
                                    <div class="review-inner">
                                        <div class="spr-review">
                                            <div class="spr-review-header">
                                                <span class="product-review spr-starratings spr-review-header-starratings"><span
                                                        class="reviewLink"><i class="an an-lg an-star"></i><i
                                                        class="an an-lg an-star"></i><i class="an an-lg an-star"></i><i
                                                        class="an an-lg an-star"></i><i
                                                        class="an an-lg an-star"></i></span></span>
                                                <h3 class="spr-review-header-title">Lorem ipsum dolor sit amet</h3>
                                                <span class="spr-review-header-byline"><strong>dsacc</strong> on <strong>Apr 09, 2019</strong></span>
                                            </div>
                                            <div class="spr-review-content">
                                                <p class="spr-review-content-body">Lorem ipsum dolor sit amet,
                                                    consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                                                    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                                                    exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                                    consequat.</p>
                                            </div>
                                        </div>
                                        <div class="spr-review">
                                            <div class="spr-review-header">
                                                <span class="product-review spr-starratings spr-review-header-starratings"><span
                                                        class="reviewLink"><i class="an an-lg an-star"></i><i
                                                        class="an an-lg an-star"></i><i class="an an-lg an-star"></i><i
                                                        class="an an-lg an-star"></i><i
                                                        class="an an-lg an-star gray-star"></i></span></span>
                                                <h3 class="spr-review-header-title">Lorem Ipsum is simply dummy text of
                                                    the printing</h3>
                                                <span class="spr-review-header-byline"><strong>larrydude</strong> on <strong>Dec 30, 2018</strong></span>
                                            </div>

                                            <div class="spr-review-content">
                                                <p class="spr-review-content-body">Sed ut perspiciatis unde omnis iste
                                                    natus error sit voluptatem accusantium doloremque laudantium, totam
                                                    rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                                                    architecto beatae vitae dicta sunt explicabo.
                                                </p>
                                            </div>
                                        </div>
                                        <div class="spr-review">
                                            <div class="spr-review-header">
                                                <span class="product-review spr-starratings spr-review-header-starratings"><span
                                                        class="reviewLink"><i class="an an-lg an-star"></i><i
                                                        class="an an-lg an-star"></i><i class="an an-lg an-star"></i><i
                                                        class="an an-lg an-star gray-star"></i><i
                                                        class="an an-lg an-star gray-star"></i></span></span>
                                                <h3 class="spr-review-header-title">Neque porro quisquam est qui dolorem
                                                    ipsum quia dolor sit amet, consectetur, adipisci velit...</h3>
                                                <span class="spr-review-header-byline"><strong>quoctri1905</strong> on <strong>Dec 30, 2018</strong></span>
                                            </div>

                                            <div class="spr-review-content">
                                                <p class="spr-review-content-body">Lorem Ipsum is simply dummy text of
                                                    the printing and typesetting industry. Lorem Ipsum has been the
                                                    industry's standard dummy text ever since the 1500s, when an unknown
                                                    printer took a galley of type and scrambled.<br>
                                                    <br>Lorem Ipsum is simply dummy text of the printing and typesetting
                                                    industry.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <h3 class="tabs-ac-style" rel="tab3">Additional information</h3>
                    <div id="tab3" class="tab-content">
                        <div class="size-chart-table table-responsive px-1">
                            <table>
                                <tbody>
                                <tr>
                                    <th>Categories</th>
                                    <td>31" - 33"</td>
                                </tr>
                                <tr>
                                    <th>Brands</th>
                                    <td>Canon</td>
                                </tr>
                                <tr>
                                    <th>Color</th>
                                    <td>Red/Gray</td>
                                </tr>
                                <tr>
                                    <th>Size</th>
                                    <td>100MPX</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <h3 class="tabs-ac-style" rel="tab4">Shipping &amp; Returns</h3>
                    <div id="tab4" class="tab-content">
                        <h4>Returns Policy</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eros justo, accumsan non dui
                            sit amet. Phasellus semper volutpat mi sed imperdiet. Ut odio lectus, vulputate non ex non,
                            mattis sollicitudin purus. Mauris consequat justo a enim interdum, in consequat dolor
                            accumsan. Nulla iaculis diam purus, ut vehicula leo efficitur at.</p>
                        <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. In blandit nunc enim, sit amet
                            pharetra erat aliquet ac.</p>
                        <h4>Shipping</h4>
                        <p>Pellentesque ultrices ut sem sit amet lacinia. Sed nisi dui, ultrices ut turpis pulvinar. Sed
                            fringilla ex eget lorem consectetur, consectetur blandit lacus varius. Duis vel scelerisque
                            elit, et vestibulum metus. Integer sit amet tincidunt tortor. Ut lacinia ullamcorper massa,
                            a fermentum arcu vehicula ut. Ut efficitur faucibus dui Nullam tristique dolor eget turpis
                            consequat varius. Quisque a interdum augue. Nam ut nibh mauris.</p>
                    </div>
                    <h3 class="tabs-ac-style" rel="tab5">Custom Tab</h3>
                    <div id="tab5" class="tab-content">
                        <p>You can set different tabs for each products.</p>
                    </div>
                </div>
            </div>
            <!--End Product Tabs-->

            <!--Related Product Slider-->
            <div class="related-product grid-products">
                <div class="section-header">
                    <h2 class="section-header__title text-center h2"><span>Related Products</span></h2>
                    <p class="sub-heading">You can stop autoplay, increase/decrease aniamtion speed and number of grid
                        to show and products from store admin.</p>
                </div>
                <div class="productPageSlider">
                    <div class="col-6 col-sm-6 col-md-4 col-lg-4 item">
                        <!-- start product image -->
                        <div class="product-image">
                            <!-- start product image -->
                            <a href="product-layout1.html" class="product-img">
                                <!-- image -->
                                <img class="primary blur-up lazyload"
                                     data-src="assets/images/product-images/elt-p-1.jpg"
                                     src="assets/images/product-images/elt-p-1.jpg" alt="" title="">
                                <!-- End image -->
                                <!-- Hover image -->
                                <img class="hover blur-up lazyload"
                                     data-src="assets/images/product-images/elt-p-1-1.jpg"
                                     src="assets/images/product-images/elt-p-1-1.jpg" alt="" title="">
                                <!-- End hover image -->
                                <!-- product label -->
                                <div class="product-labels"><span class="lbl on-sale">Sale</span></div>
                                <!-- End product label -->
                            </a>
                            <!-- end product image -->

                            <!--Product Button-->
                            <div class="button-set style3">
                                <ul>
                                    <li>
                                        <!--Quick View Button-->
                                        <a href="#quickview-popup" title="Quick View"
                                           class="btn-icon quick-view-popup quick-view" data-bs-toggle="modal"
                                           data-bs-target="#quickview_popup">
                                            <i class="icon an an-expand-arrows-alt"></i>
                                            <span class="tooltip-label">Quick View</span>
                                        </a>
                                        <!--End Quick View Button-->
                                    </li>
                                    <li>
                                        <!--Wishlist Button-->
                                        <div class="wishlist-btn">
                                            <a class="btn-icon wishlist add-to-wishlist" href="my-wishlist.html">
                                                <i class="icon an an-heart-o"></i>
                                                <span class="tooltip-label">Add To Wishlist</span>
                                            </a>
                                        </div>
                                        <!--End Wishlist Button-->
                                    </li>
                                    <li>
                                        <!--Compare Button-->
                                        <div class="compare-btn">
                                            <a class="btn-icon compare add-to-compare" href="compare-style2.html"
                                               title="Add to Compare">
                                                <i class="icon an an-balance-scale"></i>
                                                <span class="tooltip-label">Add to Compare</span>
                                            </a>
                                        </div>
                                        <!--End Compare Button-->
                                    </li>
                                </ul>
                            </div>
                            <!--End Product Button-->
                        </div>
                        <!-- end product image -->
                        <!--start product details -->
                        <div class="product-details text-left">
                            <!--Brand Name-->
                            <div class="brand-name">Coolpix</div>
                            <!--End Brand Name-->
                            <!-- product name -->
                            <div class="product-name">
                                <a href="product-layout1.html">Coolpix (A100) 20 MP Point & Shoot Camera</a>
                            </div>
                            <!-- End product name -->
                            <!-- product price -->
                            <div class="product-price">
                                <span class="old-price">$499.00</span>
                                <span class="price">$400.00</span>
                            </div>
                            <!-- End product price -->
                            <!--Product Review-->
                            <div class="product-review">
                                <i class="an an-star"></i>
                                <i class="an an-star"></i>
                                <i class="an an-star"></i>
                                <i class="an an-star"></i>
                                <i class="an an-star"></i>
                                <span class="review-label"><a href="#;">5 Reviews</a></span>
                            </div>
                            <!--End Product Review-->
                            <!--Color Variant -->
                            <ul class="swatches">
                                <li class="swatch small navy"><span class="tooltip-label">Navy</span></li>
                                <li class="swatch small green"><span class="tooltip-label">Green</span></li>
                                <li class="swatch small gray"><span class="tooltip-label">Gray</span></li>
                                <li class="swatch small aqua"><span class="tooltip-label">Aqua</span></li>
                                <li class="swatch small orange"><span class="tooltip-label">Orange</span></li>
                            </ul>
                            <!-- End Variant -->
                            <!--Cart Button-->
                            <a href="#pro-addtocart-popup" title="Add to Cart" class="btn-icon btn btn-addto-cart"
                               data-bs-toggle="modal" data-bs-target="#pro-addtocart-popup">
                                <i class="icon an an-shopping-cart"></i> <span>Add to Cart</span>
                            </a>
                            <!--end Cart Button-->
                        </div>
                        <!-- End product details -->
                    </div>
                    <div class="col-6 col-sm-6 col-md-4 col-lg-4 item">
                        <!-- start product image -->
                        <div class="product-image">
                            <!-- start product image -->
                            <a href="product-layout1.html" class="product-img">
                                <!-- image -->
                                <img class="primary blur-up lazyload"
                                     data-src="assets/images/product-images/elt-p-2.jpg"
                                     src="assets/images/product-images/elt-p-2.jpg" alt="" title="">
                                <!-- End image -->
                                <!-- Hover image -->
                                <img class="hover blur-up lazyload"
                                     data-src="assets/images/product-images/elt-p-2-1.jpg"
                                     src="assets/images/product-images/elt-p-2-1.jpg" alt="" title="">
                                <!-- End hover image -->
                            </a>
                            <!-- end product image -->

                            <!--Product Button-->
                            <div class="button-set style3">
                                <ul>
                                    <li>
                                        <!--Quick View Button-->
                                        <a href="#quickview-popup" title="Quick View"
                                           class="btn-icon quick-view-popup quick-view" data-bs-toggle="modal"
                                           data-bs-target="#quickview_popup">
                                            <i class="icon an an-expand-arrows-alt"></i>
                                            <span class="tooltip-label">Quick View</span>
                                        </a>
                                        <!--End Quick View Button-->
                                    </li>
                                    <li>
                                        <!--Wishlist Button-->
                                        <div class="wishlist-btn">
                                            <a class="btn-icon wishlist add-to-wishlist" href="my-wishlist.html">
                                                <i class="icon an an-heart-o"></i>
                                                <span class="tooltip-label">Add To Wishlist</span>
                                            </a>
                                        </div>
                                        <!--End Wishlist Button-->
                                    </li>
                                    <li>
                                        <!--Compare Button-->
                                        <div class="compare-btn">
                                            <a class="btn-icon compare add-to-compare" href="compare-style2.html"
                                               title="Add to Compare">
                                                <i class="icon an an-balance-scale"></i>
                                                <span class="tooltip-label">Add to Compare</span>
                                            </a>
                                        </div>
                                        <!--End Compare Button-->
                                    </li>
                                </ul>
                            </div>
                            <!--End Product Button-->
                        </div>
                        <!-- end product image -->
                        <!--start product details -->
                        <div class="product-details text-left">
                            <!--Brand Name-->
                            <div class="brand-name">Nikon</div>
                            <!--End Brand Name-->
                            <!-- product name -->
                            <div class="product-name">
                                <a href="product-layout1.html">Fully Automatic Washing Machine</a>
                            </div>
                            <!-- End product name -->
                            <!-- product price -->
                            <div class="product-price">
                                <span class="price">$600.00</span>
                            </div>
                            <!-- End product price -->
                            <!--Product Review-->
                            <div class="product-review">
                                <i class="an an-star"></i>
                                <i class="an an-star"></i>
                                <i class="an an-star"></i>
                                <i class="an an-star"></i>
                                <i class="an an-star gray-star"></i>
                                <span class="review-label"><a href="#;">2 Reviews</a></span>
                            </div>
                            <!--End Product Review-->
                            <!-- Color Variant -->
                            <ul class="swatches">
                                <li class="swatch small black"><span class="tooltip-label">Black</span></li>
                                <li class="swatch small navy"><span class="tooltip-label">Navy</span></li>
                                <li class="swatch small purple"><span class="tooltip-label">Purple</span></li>
                            </ul>
                            <!-- End Variant -->
                            <!--Cart Button-->
                            <a href="#pro-addtocart-popup" title="Add to Cart" class="btn-icon btn btn-addto-cart"
                               data-bs-toggle="modal" data-bs-target="#pro-addtocart-popup">
                                <i class="icon an an-shopping-cart"></i> <span>Add to Cart</span>
                            </a>
                            <!--end Cart Button-->
                        </div>
                        <!-- End product details -->
                    </div>
                    <div class="col-6 col-sm-6 col-md-4 col-lg-4 item">
                        <!-- start product image -->
                        <div class="product-image">
                            <!-- start product image -->
                            <a href="product-layout1.html" class="product-img">
                                <!-- image -->
                                <img class="primary blur-up lazyload"
                                     data-src="assets/images/product-images/elt-p-6.jpg"
                                     src="assets/images/product-images/elt-p-6.jpg" alt="" title="">
                                <!-- End image -->
                                <!-- Hover image -->
                                <img class="hover blur-up lazyload"
                                     data-src="assets/images/product-images/elt-p-6-1.jpg"
                                     src="assets/images/product-images/elt-p-6-1.jpg" alt="" title="">
                                <!-- End hover image -->
                            </a>
                            <!-- end product image -->
                            <!--Product label-->
                            <div class="product-labels"><span class="lbl pr-label2">Hot</span></div>
                            <!--Product label-->
                            <!--Product Button-->
                            <div class="button-set style3">
                                <ul>
                                    <li>
                                        <!--Quick View Button-->
                                        <a href="#quickview-popup" title="Quick View"
                                           class="btn-icon quick-view-popup quick-view" data-bs-toggle="modal"
                                           data-bs-target="#quickview_popup">
                                            <i class="icon an an-expand-arrows-alt"></i>
                                            <span class="tooltip-label">Quick View</span>
                                        </a>
                                        <!--End Quick View Button-->
                                    </li>
                                    <li>
                                        <!--Wishlist Button-->
                                        <div class="wishlist-btn">
                                            <a class="btn-icon wishlist add-to-wishlist" href="my-wishlist.html">
                                                <i class="icon an an-heart-o"></i>
                                                <span class="tooltip-label">Add To Wishlist</span>
                                            </a>
                                        </div>
                                        <!--End Wishlist Button-->
                                    </li>
                                    <li>
                                        <!--Compare Button-->
                                        <div class="compare-btn">
                                            <a class="btn-icon compare add-to-compare" href="compare-style2.html"
                                               title="Add to Compare">
                                                <i class="icon an an-balance-scale"></i>
                                                <span class="tooltip-label">Add to Compare</span>
                                            </a>
                                        </div>
                                        <!--End Compare Button-->
                                    </li>
                                </ul>
                            </div>
                            <!--End Product Button-->
                        </div>
                        <!-- end product image -->
                        <!--start product details -->
                        <div class="product-details text-left">
                            <!--Brand Name-->
                            <div class="brand-name">LG</div>
                            <!--End Brand Name-->
                            <!-- product name -->
                            <div class="product-name">
                                <a href="product-layout1.html">Alpha ILCE-6000L 24.3 MP Mirrorless</a>
                            </div>
                            <!-- End product name -->
                            <!-- product price -->
                            <div class="product-price">
                                <span class="old-price">$349.00</span>
                                <span class="price">$299.00</span>
                            </div>
                            <!-- End product price -->
                            <!--Product Review-->
                            <div class="product-review">
                                <i class="an an-star"></i>
                                <i class="an an-star"></i>
                                <i class="an an-star"></i>
                                <i class="an an-star"></i>
                                <i class="an an-star gray-star"></i>
                                <span class="review-label"><a href="#;">5 Reviews</a></span>
                            </div>
                            <!--End Product Review-->
                            <!--Image Swacthes Variant-->
                            <ul class="image-swatches swatches">
                                <li class="small"><span class="swacth-btn small blue-red"></span><span
                                        class="tooltip-label">Blue-Red</span></li>
                                <li class="small"><span class="swacth-btn small black-grey"></span><span
                                        class="tooltip-label">Black-Grey</span></li>
                                <li class="small"><span class="swacth-btn small grey-black"></span><span
                                        class="tooltip-label">Grey-Black</span></li>
                                <li class="small"><span class="swacth-btn small pink-black"></span><span
                                        class="tooltip-label">Pink Black</span></li>
                            </ul>
                            <!-- End Image Swacthes Variant-->
                            <!--Cart Button-->
                            <a href="#pro-addtocart-popup" title="Add to Cart" class="btn-icon btn btn-addto-cart"
                               data-bs-toggle="modal" data-bs-target="#pro-addtocart-popup">
                                <i class="icon an an-shopping-cart"></i> <span>Add to Cart</span>
                            </a>
                            <!--end Cart Button-->
                        </div>
                        <!-- End product details -->
                    </div>
                    <div class="col-6 col-sm-6 col-md-4 col-lg-4 item">
                        <!-- start product image -->
                        <div class="product-image">
                            <!-- start product image -->
                            <a href="product-layout1.html" class="product-img">
                                <!-- image -->
                                <img class="primary blur-up lazyload"
                                     data-src="assets/images/product-images/elt-p-3.jpg"
                                     src="assets/images/product-images/elt-p-3.jpg" alt="" title="">
                                <!-- End image -->
                                <!-- Hover image -->
                                <img class="hover blur-up lazyload"
                                     data-src="assets/images/product-images/elt-p-3-1.jpg"
                                     src="assets/images/product-images/elt-p-3-1.jpg" alt="" title="">
                                <!-- End hover image -->
                            </a>
                            <!-- end product image -->
                            <!--Product label-->
                            <div class="product-labels"><span class="lbl pr-label1">New</span></div>
                            <!--Product label-->

                            <!--Product Button-->
                            <div class="button-set style3">
                                <ul>
                                    <li>
                                        <!--Quick View Button-->
                                        <a href="#quickview-popup" title="Quick View"
                                           class="btn-icon quick-view-popup quick-view" data-bs-toggle="modal"
                                           data-bs-target="#quickview_popup">
                                            <i class="icon an an-expand-arrows-alt"></i>
                                            <span class="tooltip-label">Quick View</span>
                                        </a>
                                        <!--End Quick View Button-->
                                    </li>
                                    <li>
                                        <!--Wishlist Button-->
                                        <div class="wishlist-btn">
                                            <a class="btn-icon wishlist add-to-wishlist" href="my-wishlist.html">
                                                <i class="icon an an-heart-o"></i>
                                                <span class="tooltip-label">Add To Wishlist</span>
                                            </a>
                                        </div>
                                        <!--End Wishlist Button-->
                                    </li>
                                    <li>
                                        <!--Compare Button-->
                                        <div class="compare-btn">
                                            <a class="btn-icon compare add-to-compare" href="compare-style2.html"
                                               title="Add to Compare">
                                                <i class="icon an an-balance-scale"></i>
                                                <span class="tooltip-label">Add to Compare</span>
                                            </a>
                                        </div>
                                        <!--End Compare Button-->
                                    </li>
                                </ul>
                            </div>
                            <!--End Product Button-->
                        </div>
                        <!-- end product image -->
                        <!--start product details -->
                        <div class="product-details text-left">
                            <!--Brand Name-->
                            <div class="brand-name">PS4</div>
                            <!--End Brand Name-->
                            <!-- product name -->
                            <div class="product-name">
                                <a href="product-layout1.html">PS4 500 GB Gaming Console</a>
                            </div>
                            <!-- End product name -->
                            <!-- product price -->
                            <div class="product-price">
                                <span class="price">$310.00</span>
                            </div>
                            <!-- End product price -->
                            <!--Product Review-->
                            <div class="product-review">
                                <i class="an an-star"></i>
                                <i class="an an-star"></i>
                                <i class="an an-star"></i>
                                <i class="an an-star"></i>
                                <i class="an an-star"></i>
                                <span class="review-label"><a href="#;">1 Reviews</a></span>
                            </div>
                            <!--End Product Review-->
                            <!-- Color Variant -->
                            <ul class="swatches">
                                <li class="swatch small red"><span class="tooltip-label">red</span></li>
                                <li class="swatch small orange"><span class="tooltip-label">orange</span></li>
                                <li class="swatch small yellow"><span class="tooltip-label">yellow</span></li>
                            </ul>
                            <!-- End Variant -->
                            <!--Cart Button-->
                            <a href="#pro-addtocart-popup" title="Add to Cart" class="btn-icon btn btn-addto-cart"
                               data-bs-toggle="modal" data-bs-target="#pro-addtocart-popup">
                                <i class="icon an an-lg an-cog"></i> <span>Select Options</span>
                            </a>
                            <!--end Cart Button-->
                        </div>
                        <!-- End product details -->
                    </div>
                    <div class="col-6 col-sm-6 col-md-4 col-lg-4 item">
                        <!-- start product image -->
                        <div class="product-image">
                            <!-- start product image -->
                            <a href="product-layout1.html" class="product-img">
                                <!-- image -->
                                <img class="primary blur-up lazyload"
                                     data-src="assets/images/product-images/elt-p-4.jpg"
                                     src="assets/images/product-images/elt-p-4.jpg" alt="" title="">
                                <!-- End image -->
                                <!-- Hover image -->
                                <img class="hover blur-up lazyload"
                                     data-src="assets/images/product-images/elt-p-4-1.jpg"
                                     src="assets/images/product-images/elt-p-4-1.jpg" alt="" title="">
                                <!-- End hover image -->
                            </a>
                            <!-- end product image -->
                            <!--Product Button-->
                            <div class="button-set style3">
                                <ul>
                                    <li>
                                        <!--Quick View Button-->
                                        <a href="#quickview-popup" title="Quick View"
                                           class="btn-icon quick-view-popup quick-view" data-bs-toggle="modal"
                                           data-bs-target="#quickview_popup">
                                            <i class="icon an an-expand-arrows-alt"></i>
                                            <span class="tooltip-label">Quick View</span>
                                        </a>
                                        <!--End Quick View Button-->
                                    </li>
                                    <li>
                                        <!--Wishlist Button-->
                                        <div class="wishlist-btn">
                                            <a class="btn-icon wishlist add-to-wishlist" href="my-wishlist.html">
                                                <i class="icon an an-heart-o"></i>
                                                <span class="tooltip-label">Add To Wishlist</span>
                                            </a>
                                        </div>
                                        <!--End Wishlist Button-->
                                    </li>
                                    <li>
                                        <!--Compare Button-->
                                        <div class="compare-btn">
                                            <a class="btn-icon compare add-to-compare" href="compare-style2.html"
                                               title="Add to Compare">
                                                <i class="icon an an-balance-scale"></i>
                                                <span class="tooltip-label">Add to Compare</span>
                                            </a>
                                        </div>
                                        <!--End Compare Button-->
                                    </li>
                                </ul>
                            </div>
                            <!--End Product Button-->
                        </div>
                        <!-- end product image -->
                        <!--start product details -->
                        <div class="product-details text-left">
                            <!--Brand Name-->
                            <div class="brand-name">Philips</div>
                            <!--End Brand Name-->
                            <!-- product name -->
                            <div class="product-name">
                                <a href="product-layout1.html">Men Shaver &amp; Trimmer</a>
                            </div>
                            <!-- End product name -->
                            <!-- product price -->
                            <div class="product-price">
                                <span class="price">$89.00</span>
                            </div>
                            <!-- End product price -->
                            <!--Product Review-->
                            <div class="product-review">
                                <i class="an an-star"></i>
                                <i class="an an-star"></i>
                                <i class="an an-star"></i>
                                <i class="an an-star"></i>
                                <i class="an an-star gray-star"></i>
                                <span class="review-label"><a href="#;">4 Reviews</a></span>
                            </div>
                            <!--End Product Review-->
                            <!-- Color Variant -->
                            <ul class="swatches">
                                <li class="swatch small gray"><span class="tooltip-label">gray</span></li>
                                <li class="swatch small red"><span class="tooltip-label">red</span></li>
                                <li class="swatch small orange"><span class="tooltip-label">orange</span></li>
                                <li class="swatch small yellow"><span class="tooltip-label">yellow</span></li>
                            </ul>
                            <!-- End Variant -->
                            <!--Cart Button-->
                            <a href="#pro-addtocart-popup" title="Add to Cart" class="btn-icon btn btn-addto-cart"
                               data-bs-toggle="modal" data-bs-target="#pro-addtocart-popup">
                                <i class="icon an an-shopping-cart"></i> <span>Add to Cart</span>
                            </a>
                            <!--end Cart Button-->
                        </div>
                        <!-- End product details -->
                    </div>
                </div>
            </div>
            <!--End Related Product Slider-->

            <!--Recently Product Slider-->
            <div class="related-product grid-products">
                <div class="section-header">
                    <h2 class="section-header__title text-center h2"><span>Recently Viewed Product</span></h2>
                    <p class="sub-heading">You can manage this section from store admin as describe in above section</p>
                </div>
                <div class="productPageSlider">
                    <div class="col-6 col-sm-6 col-md-4 col-lg-4 item">
                        <!-- start product image -->
                        <div class="product-image">
                            <!-- start product image -->
                            <a href="product-layout1.html" class="product-img">
                                <!-- image -->
                                <img class="primary blur-up lazyload"
                                     data-src="assets/images/product-images/elt-p-16.jpg"
                                     src="assets/images/product-images/elt-p-16.jpg" alt="" title="">
                                <!-- End image -->
                                <!-- Hover image -->
                                <img class="hover blur-up lazyload"
                                     data-src="assets/images/product-images/elt-p-16-1.jpg"
                                     src="assets/images/product-images/elt-p-16-1.jpg" alt="" title="">
                                <!-- End hover image -->
                            </a>
                            <!-- end product image -->
                            <!--Product label-->
                            <div class="product-labels"><span class="lbl pr-label2">Hot</span></div>
                            <!--Product label-->
                            <!--Product Button-->
                            <div class="button-set style1">
                                <ul>
                                    <li>
                                        <!--Quick View Button-->
                                        <a href="#quickview-popup" title="Quick View"
                                           class="btn-icon quick-view-popup quick-view" data-bs-toggle="modal"
                                           data-bs-target="#quickview_popup">
                                            <i class="icon an an-expand-arrows-alt"></i>
                                            <span class="tooltip-label">Quick View</span>
                                        </a>
                                        <!--End Quick View Button-->
                                    </li>
                                    <li>
                                        <!--Wishlist Button-->
                                        <div class="wishlist-btn">
                                            <a class="btn-icon wishlist add-to-wishlist" href="my-wishlist.html">
                                                <i class="icon an an-heart-o"></i>
                                                <span class="tooltip-label">Add To Wishlist</span>
                                            </a>
                                        </div>
                                        <!--End Wishlist Button-->
                                    </li>
                                    <li>
                                        <!--Compare Button-->
                                        <div class="compare-btn">
                                            <a class="btn-icon compare add-to-compare" href="compare-style2.html"
                                               title="Add to Compare">
                                                <i class="icon an an-balance-scale"></i>
                                                <span class="tooltip-label">Add to Compare</span>
                                            </a>
                                        </div>
                                        <!--End Compare Button-->
                                    </li>
                                </ul>
                            </div>
                            <!--End Product Button-->
                        </div>
                        <!-- end product image -->
                        <!--start product details -->
                        <div class="product-details text-left">
                            <!--Brand Name-->
                            <div class="brand-name">Philips</div>
                            <!--End Brand Name-->
                            <!-- product name -->
                            <div class="product-name">
                                <a href="product-layout1.html">Pack Women Hair Straightener & Dryer</a>
                            </div>
                            <!-- End product name -->
                            <!-- product price -->
                            <div class="product-price">
                                <span class="price">$99.00</span>
                            </div>
                            <!-- End product price -->
                            <!--Product Review-->
                            <div class="product-review">
                                <i class="an an-star"></i>
                                <i class="an an-star"></i>
                                <i class="an an-star"></i>
                                <i class="an an-star"></i>
                                <i class="an an-star"></i>
                                <span class="review-label"><a href="#;">1 Reviews</a></span>
                            </div>
                            <!--End Product Review-->
                            <!-- Color Variant -->
                            <ul class="swatches">
                                <li class="swatch small gray"><span class="tooltip-label">gray</span></li>
                                <li class="swatch small red"><span class="tooltip-label">red</span></li>
                                <li class="swatch small orange"><span class="tooltip-label">orange</span></li>
                                <li class="swatch small yellow"><span class="tooltip-label">yellow</span></li>
                            </ul>
                            <!-- End Variant -->
                            <!--Cart Button-->
                            <a href="#pro-addtocart-popup" title="Add to Cart" class="btn-icon btn btn-addto-cart"
                               data-bs-toggle="modal" data-bs-target="#pro-addtocart-popup">
                                <i class="icon an an-shopping-cart"></i> <span>Add to Cart</span>
                            </a>
                            <!--end Cart Button-->
                        </div>
                        <!-- End product details -->
                    </div>
                    <div class="col-6 col-sm-6 col-md-4 col-lg-4 item">
                        <!-- start product image -->
                        <div class="product-image">
                            <!-- start product image -->
                            <a href="product-layout1.html" class="product-img">
                                <!-- image -->
                                <img class="primary blur-up lazyload"
                                     data-src="assets/images/product-images/elt-p-13.jpg"
                                     src="assets/images/product-images/elt-p-13.jpg" alt="" title="">
                                <!-- End image -->
                                <!-- Hover image -->
                                <img class="hover blur-up lazyload"
                                     data-src="assets/images/product-images/elt-p-13-1.jpg"
                                     src="assets/images/product-images/elt-p-13-1.jpg" alt="" title="">
                                <!-- End hover image -->
                            </a>
                            <!-- end product image -->
                            <!--Product Button-->
                            <div class="button-set style1">
                                <ul>
                                    <li>
                                        <!--Quick View Button-->
                                        <a href="#quickview-popup" title="Quick View"
                                           class="btn-icon quick-view-popup quick-view" data-bs-toggle="modal"
                                           data-bs-target="#quickview_popup">
                                            <i class="icon an an-expand-arrows-alt"></i>
                                            <span class="tooltip-label">Quick View</span>
                                        </a>
                                        <!--End Quick View Button-->
                                    </li>
                                    <li>
                                        <!--Wishlist Button-->
                                        <div class="wishlist-btn">
                                            <a class="btn-icon wishlist add-to-wishlist" href="my-wishlist.html">
                                                <i class="icon an an-heart-o"></i>
                                                <span class="tooltip-label">Add To Wishlist</span>
                                            </a>
                                        </div>
                                        <!--End Wishlist Button-->
                                    </li>
                                    <li>
                                        <!--Compare Button-->
                                        <div class="compare-btn">
                                            <a class="btn-icon compare add-to-compare" href="compare-style2.html"
                                               title="Add to Compare">
                                                <i class="icon an an-balance-scale"></i>
                                                <span class="tooltip-label">Add to Compare</span>
                                            </a>
                                        </div>
                                        <!--End Compare Button-->
                                    </li>
                                </ul>
                            </div>
                            <!--End Product Button-->
                        </div>
                        <!-- end product image -->
                        <!--start product details -->
                        <div class="product-details text-left">
                            <!--Brand Name-->
                            <div class="brand-name">Lenovo</div>
                            <!--End Brand Name-->
                            <!-- product name -->
                            <div class="product-name">
                                <a href="product-layout1.html">Lenovo Tab M10 FHD Plus Tablet</a>
                            </div>
                            <!-- End product name -->
                            <!-- product price -->
                            <div class="product-price">
                                <span class="price">$199.00</span>
                            </div>
                            <!-- End product price -->
                            <!--Product Review-->
                            <div class="product-review">
                                <i class="an an-star"></i>
                                <i class="an an-star"></i>
                                <i class="an an-star"></i>
                                <i class="an an-star"></i>
                                <i class="an an-star"></i>
                                <span class="review-label"><a href="#;">1 Reviews</a></span>
                            </div>
                            <!--End Product Review-->
                            <!--Image Swacthes Variant-->
                            <ul class="image-swatches swatches">
                                <li class="small"><span class="swacth-btn small blue-red"></span><span
                                        class="tooltip-label">Blue-Red</span></li>
                                <li class="small"><span class="swacth-btn small black-grey"></span><span
                                        class="tooltip-label">Black-Grey</span></li>
                                <li class="small"><span class="swacth-btn small grey-black"></span><span
                                        class="tooltip-label">Grey-Black</span></li>
                                <li class="small"><span class="swacth-btn small pink-black"></span><span
                                        class="tooltip-label">Pink Black</span></li>
                            </ul>
                            <!-- End Image Swacthes Variant-->
                            <!--Cart Button-->
                            <a href="#pro-addtocart-popup" title="Add to Cart" class="btn-icon btn btn-addto-cart"
                               data-bs-toggle="modal" data-bs-target="#pro-addtocart-popup">
                                <i class="icon an an-shopping-cart"></i> <span>Add to Cart</span>
                            </a>
                            <!--end Cart Button-->
                        </div>
                        <!-- End product details -->
                    </div>
                    <div class="col-6 col-sm-6 col-md-4 col-lg-4 item">
                        <!-- start product image -->
                        <div class="product-image">
                            <!-- start product image -->
                            <a href="product-layout1.html" class="product-img">
                                <!-- image -->
                                <img class="primary blur-up lazyload"
                                     data-src="assets/images/product-images/elt-p-15.jpg"
                                     src="assets/images/product-images/elt-p-15.jpg" alt="" title="">
                                <!-- End image -->
                                <!-- Hover image -->
                                <img class="hover blur-up lazyload"
                                     data-src="assets/images/product-images/elt-p-15-1.jpg"
                                     src="assets/images/product-images/elt-p-15-1.jpg" alt="" title="">
                                <!-- End hover image -->
                            </a>
                            <!-- end product image -->
                            <!--Product label-->
                            <div class="product-labels"><span class="lbl pr-label1">New</span></div>
                            <!--Product label-->
                            <!--Product Button-->
                            <div class="button-set style1">
                                <ul>
                                    <li>
                                        <!--Quick View Button-->
                                        <a href="#quickview-popup" title="Quick View"
                                           class="btn-icon quick-view-popup quick-view" data-bs-toggle="modal"
                                           data-bs-target="#quickview_popup">
                                            <i class="icon an an-expand-arrows-alt"></i>
                                            <span class="tooltip-label">Quick View</span>
                                        </a>
                                        <!--End Quick View Button-->
                                    </li>
                                    <li>
                                        <!--Wishlist Button-->
                                        <div class="wishlist-btn">
                                            <a class="btn-icon wishlist add-to-wishlist" href="my-wishlist.html">
                                                <i class="icon an an-heart-o"></i>
                                                <span class="tooltip-label">Add To Wishlist</span>
                                            </a>
                                        </div>
                                        <!--End Wishlist Button-->
                                    </li>
                                    <li>
                                        <!--Compare Button-->
                                        <div class="compare-btn">
                                            <a class="btn-icon compare add-to-compare" href="compare-style2.html"
                                               title="Add to Compare">
                                                <i class="icon an an-balance-scale"></i>
                                                <span class="tooltip-label">Add to Compare</span>
                                            </a>
                                        </div>
                                        <!--End Compare Button-->
                                    </li>
                                </ul>
                            </div>
                            <!--End Product Button-->
                        </div>
                        <!-- end product image -->
                        <!--start product details -->
                        <div class="product-details text-left">
                            <!--Brand Name-->
                            <div class="brand-name">Dell</div>
                            <!--End Brand Name-->
                            <!-- product name -->
                            <div class="product-name">
                                <a href="product-layout1.html">DELL 22 inch Full HD IPS Panel Monitor</a>
                            </div>
                            <!-- End product name -->
                            <!-- product price -->
                            <div class="product-price">
                                <span class="price">$249.00</span>
                            </div>
                            <!-- End product price -->
                            <!--Product Review-->
                            <div class="product-review">
                                <i class="an an-star"></i>
                                <i class="an an-star"></i>
                                <i class="an an-star"></i>
                                <i class="an an-star"></i>
                                <i class="an an-star"></i>
                                <span class="review-label"><a href="#;">10 Reviews</a></span>
                            </div>
                            <!--End Product Review-->
                            <!-- Color Variant -->
                            <ul class="swatches">
                                <li class="swatch small red"><span class="tooltip-label">red</span></li>
                                <li class="swatch small orange"><span class="tooltip-label">orange</span></li>
                            </ul>
                            <!-- End Variant -->
                            <!--Cart Button-->
                            <a href="#pro-addtocart-popup" title="Add to Cart" class="btn-icon btn btn-addto-cart"
                               data-bs-toggle="modal" data-bs-target="#pro-addtocart-popup">
                                <i class="icon an an-lg an-cog"></i> <span>Select Options</span>
                            </a>
                            <!--end Cart Button-->
                        </div>
                        <!-- End product details -->
                    </div>
                    <div class="col-6 col-sm-6 col-md-4 col-lg-4 item">
                        <!-- start product image -->
                        <div class="product-image">
                            <!-- start product image -->
                            <a href="product-layout1.html" class="product-img">
                                <!-- image -->
                                <img class="primary blur-up lazyload"
                                     data-src="assets/images/product-images/elt-p-10.jpg"
                                     src="assets/images/product-images/elt-p-10.jpg" alt="" title="">
                                <!-- End image -->
                                <!-- Hover image -->
                                <img class="hover blur-up lazyload"
                                     data-src="assets/images/product-images/elt-p-10-1.jpg"
                                     src="assets/images/product-images/elt-p-10-1.jpg" alt="" title="">
                                <!-- End hover image -->
                                <span class="sold-out"><span>Sold out</span></span>
                            </a>
                            <!-- end product image -->
                        </div>
                        <!-- end product image -->
                        <!--start product details -->
                        <div class="product-details text-left">
                            <!--Brand Name-->
                            <div class="brand-name">HP</div>
                            <!--End Brand Name-->
                            <!-- product name -->
                            <div class="product-name">
                                <a href="product-layout1.html">All in 1 Intel Core i5 high Speed Laptop 13-s102TU</a>
                            </div>
                            <!-- End product name -->
                            <!-- product price -->
                            <div class="product-price">
                                <span class="price">$1,239.00</span>
                            </div>
                            <!-- End product price -->
                            <!--Product Review-->
                            <div class="product-review">
                                <i class="an an-star"></i>
                                <i class="an an-star"></i>
                                <i class="an an-star"></i>
                                <i class="an an-star"></i>
                                <i class="an an-star gray-star"></i>
                                <span class="review-label"><a href="#;">8 Reviews</a></span>
                            </div>
                            <!--End Product Review-->
                            <!-- Color Variant -->
                            <ul class="swatches">
                                <li class="swatch small black"><span class="tooltip-label">black</span></li>
                                <li class="swatch small navy"><span class="tooltip-label">navy</span></li>
                                <li class="swatch small darkgreen"><span class="tooltip-label">darkgreen</span></li>
                            </ul>
                            <!-- End Variant -->
                        </div>
                        <!-- End product details -->
                    </div>
                </div>
            </div>
            <!--End Recently Product Slider-->

        </div><!--End Body Container-->

        <!--Product Navigation-->
        <a href="#" class="product-nav prev-pro" title="Previous Product">
                    <span class="details">PS4 500 GB Gaming Console<br>
                        <span class="price">$49</span>
                    </span>
            <span class="img"><img src="assets/images/product-images/60x77-1.jpg" alt=""/></span>
        </a>
        <a href="#" class="product-nav next-pro" title="Next Product">
            <span class="img"><img src="assets/images/product-images/60x77.jpg" alt=""></span>
            <span class="details">Fully Automatic Washing Machine<br>
                        <span class="price">$588</span>
                    </span>
        </a>
        <!--End Product Navigation-->
    </div><!--End Page Wrapper-->

    <!--Footer-->
    <div class="footer footer-1">
        <div class="footer-top clearfix">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-4 col-lg-3 about-us-col">
                        <img src="assets/images/logo-white.png" alt="ShopLook"/>
                        <p>55 Gallaxy Enque, 2568 steet,<br>23568 NY</p>
                        <p><b>Phone</b>: (440) 000 000 0000</p>
                        <p><b>Email</b>: <a href="mailto:sales@yousite.com">sales@yousite.com</a></p>
                        <ul class="list--inline social-icons">
                            <li><a href="#"><i class="icon an an-facebook-f"></i></a></li>
                            <li><a href="#"><i class="icon an an-twitter"></i></a></li>
                            <li><a href="#"><i class="icon an an-pinterest-p"></i></a></li>
                            <li><a href="#"><i class="icon an an-instagram"></i></a></li>
                            <li><a href="#"><i class="icon an an-youtube"></i></a></li>
                        </ul>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-3 footer-links">
                        <h4 class="h4">Quick Shop</h4>
                        <ul>
                            <li><a href="#">Home Appliances</a></li>
                            <li><a href="#">Phones &amp; Tablet</a></li>
                            <li><a href="#">Audio &amp; Video</a></li>
                            <li><a href="#">Digital Cameras</a></li>
                            <li><a href="#">Accessories</a></li>
                            <li><a href="#">Computer &amp; Laptop</a></li>
                            <li><a href="#">Game &amp; Video</a></li>
                        </ul>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-3 footer-links">
                        <h4 class="h4">Informations</h4>
                        <ul>
                            <li><a href="login.html">Login</a></li>
                            <li><a href="my-account.html">My Account</a></li>
                            <li><a href="#">View Cart</a></li>
                            <li><a href="#">Privacy policy</a></li>
                            <li><a href="#">Shipping &amp; Returns</a></li>
                            <li><a href="#">Terms &amp; condition</a></li>
                            <li><a href="#">404 Page</a></li>
                        </ul>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-3 footer-links">
                        <h4 class="h4">Customer Services</h4>
                        <ul>
                            <li><a href="blog-left-sidebar.html">Blog</a></li>
                            <li><a href="aboutus-style1.html">About us</a></li>
                            <li><a href="faqs-style1.html">FAQ's</a></li>
                            <li><a href="contact-style1.html">Contact Us</a></li>
                            <li><a href="#">Orders and Returns</a></li>
                            <li><a href="#">Track My Order</a></li>
                            <li><a href="#">Support Center</a></li>
                        </ul>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-3 newsletter-col">
                        <div class="display-table">
                            <div class="display-table-cell footer-newsletter">
                                <form action="#" method="post">
                                    <label class="h4">Sign Up To Our Newsletter</label>
                                    <p>Enter your email to receive daily news and get 20% off coupon for all items.</p>
                                    <div class="input-group">
                                        <input type="email" class="input-group__field newsletter-input" name="EMAIL"
                                               value="" placeholder="Email Your address" required>
                                        <span class="input-group__btn">
                                                    <button type="submit" class="btn btn-secondary newsletter__submit"
                                                            name="commit" id="Subscribe"><span
                                                            class="newsletter__submit-text--large">Subscribe</span></button>
                                                </span>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bottom clearfix">
            <div class="container">
                <ul class="payment-icons list--inline">
                    <li><i class="an an-cc-visa" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-mastercard" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-amex" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-paypal" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-discover" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-stripe" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-jcb" aria-hidden="true"></i></li>
                </ul>
                <div class="copytext">
                    &copy; 2022 ShopLook. All Rights By <a href="http://www.bootstrapMB.com">bootstrapMB</a>.
                </div>
            </div>
        </div>
    </div>
    <!--End Footer-->

    <!--Scoll Top-->
    <span id="site-scroll"><i class="icon an an-arrow-up"></i></span>
    <!--End Scoll Top-->

    <!--MiniCart Drawer-->
    <div class="minicart-right-drawer modal right fade" id="minicart-drawer">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div id="cart-drawer" class="block block-cart">
                    <a href="javascript:void(0);" class="close-cart" data-bs-dismiss="modal" aria-label="Close"><i
                            class="an an-times"></i></a>
                    <h4>Your cart (3 Items)</h4>
                    <div class="minicart-content">
                        <ul class="clearfix">
                            <li class="item clearfix">
                                <a class="product-image" href="#">
                                    <img src="assets/images/product-images/cart-page-img1.jpg"
                                         data-src="assets/images/product-images/cart-page-img1.jpg" alt="" title="">
                                </a>
                                <div class="product-details">
                                    <a href="#" class="remove"><i class="an an-times" aria-hidden="true"></i></a>
                                    <a href="#" class="edit-i remove"><i class="icon an an-edit" aria-hidden="true"></i></a>
                                    <a class="product-title" href="cart-style1.html">Acer NX.MVMSI.035 Intel Core i3
                                        15.6 inches Laptop</a>
                                    <div class="variant-cart">Black / XL</div>
                                    <div class="wrapQtyBtn">
                                        <div class="qtyField">
                                            <a class="qtyBtn minus" href="javascript:void(0);"><i class="an an-minus"
                                                                                                  aria-hidden="true"></i></a>
                                            <input type="text" name="quantity" value="1" class="qty">
                                            <a class="qtyBtn plus" href="javascript:void(0);"><i class="an an-plus"
                                                                                                 aria-hidden="true"></i></a>
                                        </div>
                                    </div>
                                    <div class="priceRow">
                                        <div class="product-price">
                                            <span class="money">$59.00</span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="item clearfix">
                                <a class="product-image" href="#">
                                    <img src="assets/images/product-images/cart-page-img2.jpg"
                                         data-src="assets/images/product-images/cart-page-img2.jpg" alt="" title="">
                                </a>
                                <div class="product-details">
                                    <a href="#" class="remove"><i class="an an-times" aria-hidden="true"></i></a>
                                    <a href="#" class="edit-i remove"><i class="icon an an-edit" aria-hidden="true"></i></a>
                                    <a class="product-title" href="cart-style1.html">Canon CSG-QX10 Full Shot Lens</a>
                                    <div class="variant-cart">Red / S</div>
                                    <div class="wrapQtyBtn">
                                        <div class="qtyField">
                                            <a class="qtyBtn minus" href="javascript:void(0);"><i class="an an-minus"
                                                                                                  aria-hidden="true"></i></a>
                                            <input type="text" name="quantity" value="1" class="qty">
                                            <a class="qtyBtn plus" href="javascript:void(0);"><i class="an an-plus"
                                                                                                 aria-hidden="true"></i></a>
                                        </div>
                                    </div>
                                    <div class="priceRow">
                                        <div class="product-price">
                                            <span class="money">$89.00</span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="item clearfix">
                                <a class="product-image" href="#">
                                    <img src="assets/images/product-images/elt-p-18-1.jpg"
                                         data-src="assets/images/product-images/elt-p-18-1.jpg" alt="" title="">
                                </a>
                                <div class="product-details">
                                    <a href="#" class="remove"><i class="an an-times" aria-hidden="true"></i></a>
                                    <a href="#" class="edit-i remove"><i class="icon an an-edit" aria-hidden="true"></i></a>
                                    <a class="product-title" href="cart-style1.html">Fully Automatic Washing Machine</a>
                                    <div class="wrapQtyBtn">
                                        <div class="qtyField">
                                            <a class="qtyBtn minus" href="javascript:void(0);"><i class="an an-minus"
                                                                                                  aria-hidden="true"></i></a>
                                            <input type="text" name="quantity" value="1" class="qty">
                                            <a class="qtyBtn plus" href="javascript:void(0);"><i class="an an-plus"
                                                                                                 aria-hidden="true"></i></a>
                                        </div>
                                    </div>
                                    <div class="priceRow">
                                        <div class="product-price">
                                            <span class="money">$1189.00</span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="minicart-bottom">
                        <div class="subtotal list">
                            <span>Shipping:</span>
                            <span class="product-price">$10.00</span>
                        </div>
                        <div class="subtotal list">
                            <span>Tax:</span>
                            <span class="product-price">$05.00</span>
                        </div>
                        <div class="subtotal">
                            <span>Total:</span>
                            <span class="product-price">$93.13</span>
                        </div>
                        <div class="row mt-3 mb-3">
                            <div class="col-12 col-sm-12 col-md-6 col-lg-6 pr-0">
                                <a href="checkout-style2.html" class="btn proceed-to-checkout">Go to Checkout</a>
                            </div>
                            <div class="col-12 col-sm-12 col-md-6 col-lg-6">
                                <a href="cart-style1.html" class="btn btn-secondary cart-btn">View Cart</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--End MiniCart Drawer-->

    <!-- Shipping Popup-->
    <div class="modal fade" id="ShippingInfo" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                            <h5>DELIVERY</h5>
                            <ul>
                                <li>Dispatch: Within 24 Hours</li>
                                <li>Free shipping across all products on a minimum purchase of $50.</li>
                                <li>International delivery time - 7-10 business days</li>
                                <li>Cash on delivery might be available</li>
                                <li>Easy 30 days returns and exchanges</li>
                            </ul>
                            <h5>RETURNS</h5>
                            <p>If you do not like the product you can return it within 15 days - no questions asked.
                                This excludes bodysuits, swimwear and clearance sale items. We have an easy and hassle
                                free return policy. Please look at our Delivery &amp; Returns section for further
                                information.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Shipping Popup-->

    <!--Product Enuiry Popup-->
    <div class="modal fade" id="productInquiry" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                            <div class="contact-form form-vertical">
                                <div class="page-title text-center"><i class="an an-lg an-envelope-open"></i>
                                    <h3>Have a question? About Product Or Any things?</h3></div>
                                <form method="post" action="#" id="contact_form" class="contact-form">
                                    <div class="formFeilds">
                                        <div class="row">
                                            <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                                                <input type="text" id="ContactFormName" name="contact[name]"
                                                       placeholder="Name" value="" required>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-12 col-sm-12 col-md-6 col-lg-6">
                                                <input type="email" id="ContactFormEmail" name="contact[email]"
                                                       placeholder="Email" autocapitalize="off" value="" required>
                                            </div>
                                            <div class="col-12 col-sm-12 col-md-6 col-lg-6">
                                                <input required type="tel" id="ContactFormPhone" name="contact[phone]"
                                                       pattern="[0-9\-]*" placeholder="Phone Number" value="">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                                                <textarea required rows="10" id="ContactFormMessage"
                                                          name="contact[body]"
                                                          placeholder="Type Your Message"></textarea>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-12 col-sm-12 col-md-12 col-lg-12 text-center">
                                                <input type="submit" class="btn" value="Ask our consultant">
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--End Product Enuiry Popup-->

    <!--Size Chart-->
    <div class="modal fade" id="sizechart" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                            <h4>Size Guide Popup</h4>
                            <p>This is a standardised guide to give you an idea of what size you will need, however some
                                brands may vary from these conversions.</p>
                            <div class="size-chart-table table-responsive px-1">
                                <table>
                                    <tbody>
                                    <tr>
                                        <th>Size</th>
                                        <th>XXS - XS</th>
                                        <th>XS - S</th>
                                        <th>S - M</th>
                                        <th>M - L</th>
                                        <th>L - XL</th>
                                        <th>XL - XXL</th>
                                    </tr>
                                    <tr>
                                        <td>UK</td>
                                        <td>6</td>
                                        <td>8</td>
                                        <td>10</td>
                                        <td>12</td>
                                        <td>14</td>
                                        <td>16</td>
                                    </tr>
                                    <tr>
                                        <td>US</td>
                                        <td>2</td>
                                        <td>4</td>
                                        <td>6</td>
                                        <td>8</td>
                                        <td>10</td>
                                        <td>12</td>
                                    </tr>
                                    <tr>
                                        <td>Italy (IT)</td>
                                        <td>38</td>
                                        <td>40</td>
                                        <td>42</td>
                                        <td>44</td>
                                        <td>46</td>
                                        <td>48</td>
                                    </tr>
                                    <tr>
                                        <td>France (FR/EU)</td>
                                        <td>34</td>
                                        <td>36</td>
                                        <td>38</td>
                                        <td>40</td>
                                        <td>42</td>
                                        <td>44</td>
                                    </tr>
                                    <tr>
                                        <td>Denmark</td>
                                        <td>32</td>
                                        <td>34</td>
                                        <td>36</td>
                                        <td>38</td>
                                        <td>40</td>
                                        <td>42</td>
                                    </tr>
                                    <tr>
                                        <td>Russia</td>
                                        <td>40</td>
                                        <td>42</td>
                                        <td>44</td>
                                        <td>46</td>
                                        <td>48</td>
                                        <td>50</td>
                                    </tr>
                                    <tr>
                                        <td>Germany</td>
                                        <td>32</td>
                                        <td>34</td>
                                        <td>36</td>
                                        <td>38</td>
                                        <td>40</td>
                                        <td>42</td>
                                    </tr>
                                    <tr>
                                        <td>Japan</td>
                                        <td>5</td>
                                        <td>7</td>
                                        <td>9</td>
                                        <td>11</td>
                                        <td>13</td>
                                        <td>15</td>
                                    </tr>
                                    <tr>
                                        <td>Australia</td>
                                        <td>6</td>
                                        <td>8</td>
                                        <td>10</td>
                                        <td>12</td>
                                        <td>14</td>
                                        <td>16</td>
                                    </tr>
                                    <tr>
                                        <td>Korea</td>
                                        <td>33</td>
                                        <td>44</td>
                                        <td>55</td>
                                        <td>66</td>
                                        <td>77</td>
                                        <td>88</td>
                                    </tr>
                                    <tr>
                                        <td>China</td>
                                        <td>160/84</td>
                                        <td>165/86</td>
                                        <td>170/88</td>
                                        <td>175/90</td>
                                        <td>180/92</td>
                                        <td>185/94</td>
                                    </tr>
                                    <tr>
                                        <td><strong>Jeans</strong></td>
                                        <td>24-25</td>
                                        <td>26-27</td>
                                        <td>27-28</td>
                                        <td>29-30</td>
                                        <td>31-32</td>
                                        <td>32-33</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--End Size Chart-->

    <!--Sticky Cart-->
    <div class="stickyCart">
        <div class="container">
            <form method="post" action="#" id="sticky-cart">
                <div class="img"><img src="assets/images/product-images/40x50.jpg" class="product-featured-img" alt="">
                </div>
                <div class="sticky-title">Canon CSG-QX10 Full Shot Lens</div>
                <div class="stickyOptions">
                    <div class="selectedOpt">Please choose an option</div>
                    <ul>
                        <li class="vrOpt">Red / S - <span class="money">Rs. 35,643.51</span></li>
                        <li class="soldout">Blue / S - Sold out</li>
                        <li class="vrOpt">Black / S - <span class="money">Rs. 35,643.51</span></li>
                        <li class="vrOpt">Pink / S - <span class="money">Rs. 35,643.51</span></li>
                        <li class="vrOpt">Red / M - <span class="money">Rs. 35,643.51</span></li>
                        <li class="vrOpt">Blue / M - <span class="money">Rs. 35,643.51</span></li>
                        <li class="vrOpt">Pink / M - <span class="money">Rs. 35,643.51</span></li>
                        <li class="vrOpt">Red / L - <span class="money">Rs. 35,643.51</span></li>
                        <li class="vrOpt">Blue / L - <span class="money">Rs. 35,643.51</span></li>
                        <li class="vrOpt">Black / L - <span class="money">Rs. 35,643.51</span></li>
                    </ul>
                </div>
                <select name="id" id="variantOptions1" class="product-form__variants selectbox no-js">
                    <option selected="selected">Red / S</option>
                    <option disabled="disabled">Blue / S - Sold out</option>
                    <option>Black / S</option>
                    <option>Pink / S</option>
                    <option>Red / M</option>
                    <option>Blue / M</option>
                    <option>Pink / M</option>
                    <option>Red / L</option>
                    <option>Blue / L</option>
                    <option>Black / L</option>
                </select>
                <div class="wrapQtyBtn" title="Quantity">
                    <div class="qtyField">
                        <a class="qtyBtn minus" href="javascript:void(0);"><i class="an an-minus"></i></a>
                        <input type="text" id="quantity1" name="quantity" value="1" class="product-form__input qty">
                        <a class="qtyBtn plus" href="javascript:void(0);"><i class="an an-plus"></i></a>
                    </div>
                </div>
                <button type="submit" name="add" class="btn product-form__cart-submit"><span>Add to cart</span></button>
            </form>
        </div>
    </div>
    <!--End Sticky Cart-->

    <!-- Quickview Modal -->
    <div class="modal fade" id="quickview_popup" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12 col-sm-6 col-md-6 col-lg-6">
                            <div id="slider">
                                <!-- model thumbnail -->
                                <div id="quickView" class="carousel slide">
                                    <div class="quickview-in">
                                        <!-- image slide carousel items -->
                                        <div class="carousel-inner">
                                            <!-- slide 1 -->
                                            <div class="item carousel-item active" data-bs-slide-number="0">
                                                <img class="blur-up lazyload"
                                                     data-src="assets/images/product-images/elt-p-15.jpg"
                                                     src="assets/images/product-images/elt-p-15.jpg" alt="product"
                                                     title="">
                                            </div>
                                            <!-- End slide 1 -->
                                            <!-- slide 2 -->
                                            <div class="item carousel-item" data-bs-slide-number="1">
                                                <img class="blur-up lazyload"
                                                     data-src="assets/images/product-images/elt-p-15-1.jpg"
                                                     src="assets/images/product-images/elt-p-15-1.jpg" alt="product"
                                                     title="">
                                            </div>
                                            <!-- End slide 2 -->
                                            <!-- slide 3 -->
                                            <div class="item carousel-item" data-bs-slide-number="2">
                                                <img class="blur-up lazyload"
                                                     data-src="assets/images/product-images/elt-p-9.jpg"
                                                     src="assets/images/product-images/elt-p-9.jpg" alt="product"
                                                     title="">
                                            </div>
                                            <!-- End slide 3 -->
                                            <!-- slide 4 -->
                                            <div class="item carousel-item" data-bs-slide-number="3">
                                                <img class="blur-up lazyload"
                                                     data-src="assets/images/product-images/elt-p-8.jpg"
                                                     src="assets/images/product-images/elt-p-8.jpg" alt="product"
                                                     title="">
                                            </div>
                                            <!-- End slide 4 -->
                                            <!-- slide 5 -->
                                            <div class="item carousel-item" data-bs-slide-number="4">
                                                <img class="blur-up lazyload"
                                                     data-src="assets/images/product-images/elt-p-14.jpg"
                                                     src="assets/images/product-images/elt-p-14.jpg" alt="product"
                                                     title="">
                                            </div>
                                            <!-- End slide 5 -->
                                            <!-- slide 6 -->
                                            <div class="item carousel-item" data-bs-slide-number="5">
                                                <img class="blur-up lazyload"
                                                     data-src="assets/images/product-images/elt-p-14-1.jpg"
                                                     src="assets/images/product-images/elt-p-14-1.jpg" alt="product"
                                                     title="">
                                            </div>
                                            <!-- End slide 6 -->
                                        </div>
                                        <!-- End image slide carousel items -->
                                        <!-- arrow button -->
                                        <div class="np-btns">
                                            <a class="carousel-control left" href="#quickView"
                                               data-bs-target="#quickView" data-bs-slide="prev"><i
                                                    class="an an-angle-left"></i></a>
                                            <a class="carousel-control right" href="#quickView"
                                               data-bs-target="#quickView" data-bs-slide="next"><i
                                                    class="an an-angle-right"></i></a>
                                        </div>
                                        <!-- End arrow button -->
                                    </div>
                                    <!-- model thumbnail image -->
                                    <div class="model-thumbnail-img">
                                        <!-- model thumbnail slide -->
                                        <ul class="carousel-indicators list-inline">
                                            <!-- slide 1 -->
                                            <li class="list-inline-item active">
                                                <a id="carousel-selector-0" class="selected" data-bs-slide-to="0"
                                                   data-bs-target="#quickView">
                                                    <img class="blur-up lazyload"
                                                         data-src="assets/images/product-images/elt-p-15.jpg"
                                                         src="assets/images/product-images/elt-p-15.jpg" alt="product"
                                                         title="">
                                                </a>
                                            </li>
                                            <!-- End slide 1 -->
                                            <!-- slide 2 -->
                                            <li class="list-inline-item">
                                                <a id="carousel-selector-1" data-bs-slide-to="1"
                                                   data-bs-target="#quickView">
                                                    <img class="blur-up lazyload"
                                                         data-src="assets/images/product-images/elt-p-15-1.jpg"
                                                         src="assets/images/product-images/elt-p-15-1.jpg" alt="product"
                                                         title="">
                                                </a>
                                            </li>
                                            <!-- End slide 2 -->
                                            <!-- slide 3 -->
                                            <li class="list-inline-item">
                                                <a id="carousel-selector-2" data-bs-slide-to="2"
                                                   data-bs-target="#quickView">
                                                    <img class="blur-up lazyload"
                                                         data-src="assets/images/product-images/elt-p-9.jpg"
                                                         src="assets/images/product-images/elt-p-9.jpg" alt="product"
                                                         title="">
                                                </a>
                                            </li>
                                            <!-- End slide 3 -->
                                            <!-- slide 4 -->
                                            <li class="list-inline-item">
                                                <a id="carousel-selector-3" data-bs-slide-to="3"
                                                   data-bs-target="#quickView">
                                                    <img class="blur-up lazyload"
                                                         data-src="assets/images/product-images/elt-p-8.jpg"
                                                         src="assets/images/product-images/elt-p-8.jpg" alt="product"
                                                         title="">
                                                </a>
                                            </li>
                                            <!-- End slide 4 -->
                                            <!-- slide 5 -->
                                            <li class="list-inline-item">
                                                <a id="carousel-selector-4" data-bs-slide-to="4"
                                                   data-bs-target="#quickView">
                                                    <img class="blur-up lazyload"
                                                         data-src="assets/images/product-images/elt-p-14.jpg"
                                                         src="assets/images/product-images/elt-p-14.jpg" alt="product"
                                                         title="">
                                                </a>
                                            </li>
                                            <!-- End slide 5 -->
                                            <!-- slide 6 -->
                                            <li class="list-inline-item">
                                                <a id="carousel-selector-5" data-bs-slide-to="5"
                                                   data-bs-target="#quickView">
                                                    <img class="blur-up lazyload"
                                                         data-src="assets/images/product-images/elt-p-14-1.jpg"
                                                         src="assets/images/product-images/elt-p-14-1.jpg" alt="product"
                                                         title="">
                                                </a>
                                            </li>
                                            <!-- End slide 6 -->
                                        </ul>
                                        <!-- End model thumbnail slide -->
                                    </div>
                                    <!-- End model thumbnail image -->
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-6 col-md-6 col-lg-6">
                            <div class="product-brand"><a href="#">Charcoal</a></div>
                            <h2 class="product-title">Product Quick View Popup</h2>
                            <div class="product-review">
                                <div class="rating">
                                    <i class="an an-star"></i><i class="an an-star"></i><i class="an an-star"></i><i
                                        class="an an-star"></i><i class="an an-star"></i>
                                </div>
                                <div class="reviews"><a href="#">5 Reviews</a></div>
                            </div>
                            <div class="product-info">
                                <div class="product-stock"><span class="instock">In Stock</span> <span
                                        class="outstock hide">Unavailable</span></div>
                                <div class="product-sku">SKU: <span class="variant-sku">19115-rdxs</span></div>
                            </div>
                            <div class="pricebox">
                                <span class="price old-price">$900.00</span>
                                <span class="price">$800.00</span>
                            </div>
                            <div class="sort-description">Shoplook Multipurpose Bootstrap 5 Html Template that will give
                                you and your customers a smooth shopping experience which can be used for various kinds
                                of stores such as fashion..
                            </div>
                            <form method="post" action="#" id="product_form--option" class="product-form">
                                <div class="product-options">
                                    <div class="swatch clearfix swatch-0 option1">
                                        <div class="product-form__item">
                                            <label class="label">Color:<span class="required">*</span> <span
                                                    class="slVariant">Red</span></label>
                                            <div class="swatch-element color">
                                                <input class="swatchInput" id="swatch-black" type="radio"
                                                       name="option-0" value="Black">
                                                <label class="swatchLbl small black" for="swatch-black"
                                                       title="Black"></label>
                                            </div>
                                            <div class="swatch-element color">
                                                <input class="swatchInput" id="swatch-blue" type="radio" name="option-0"
                                                       value="blue">
                                                <label class="swatchLbl small blue" for="swatch-blue"
                                                       title="Blue"></label>
                                            </div>
                                            <div class="swatch-element color">
                                                <input class="swatchInput" id="swatch-red" type="radio" name="option-0"
                                                       value="Blue">
                                                <label class="swatchLbl small red" for="swatch-red" title="Red"></label>
                                            </div>
                                            <div class="swatch-element color">
                                                <input class="swatchInput" id="swatch-pink" type="radio" name="option-0"
                                                       value="Pink">
                                                <label class="swatchLbl color small pink" for="swatch-pink"
                                                       title="Pink"></label>
                                            </div>
                                            <div class="swatch-element color">
                                                <input class="swatchInput" id="swatch-orange" type="radio"
                                                       name="option-0" value="Orange">
                                                <label class="swatchLbl color small orange" for="swatch-orange"
                                                       title="Orange"></label>
                                            </div>
                                            <div class="swatch-element color">
                                                <input class="swatchInput" id="swatch-yellow" type="radio"
                                                       name="option-0" value="Yellow">
                                                <label class="swatchLbl color small yellow" for="swatch-yellow"
                                                       title="Yellow"></label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swatch clearfix swatch-1 option2">
                                        <div class="product-form__item">
                                            <label class="label">Size:<span class="required">*</span> <span
                                                    class="slVariant">XS</span></label>
                                            <div class="swatch-element xs">
                                                <input class="swatchInput" id="swatch-1-xs" type="radio" name="option-1"
                                                       value="XS">
                                                <label class="swatchLbl medium" for="swatch-1-xs" title="XS">XS</label>
                                            </div>
                                            <div class="swatch-element s">
                                                <input class="swatchInput" id="swatch-1-s1" type="radio" name="option-1"
                                                       value="S">
                                                <label class="swatchLbl medium" for="swatch-1-s1" title="S">S</label>
                                            </div>
                                            <div class="swatch-element m">
                                                <input class="swatchInput" id="swatch-1-m" type="radio" name="option-1"
                                                       value="M">
                                                <label class="swatchLbl medium" for="swatch-1-m" title="M">M</label>
                                            </div>
                                            <div class="swatch-element l">
                                                <input class="swatchInput" id="swatch-1-l" type="radio" name="option-1"
                                                       value="L">
                                                <label class="swatchLbl medium" for="swatch-1-l" title="L">L</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="product-action clearfix">
                                        <div class="quantity">
                                            <div class="wrapQtyBtn">
                                                <div class="qtyField">
                                                    <a class="qtyBtn minus" href="javascript:void(0);"><i
                                                            class="an an-minus" aria-hidden="true"></i></a>
                                                    <input type="text" id="quantityp" name="quantity" value="1"
                                                           class="product-form__input qty">
                                                    <a class="qtyBtn plus" href="javascript:void(0);"><i
                                                            class="an an-plus" aria-hidden="true"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="add-to-cart">
                                            <button type="button" class="btn button-cart">
                                                <span>Add to cart</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <div class="wishlist-btn">
                                <a class="wishlist add-to-wishlist" href="#" title="Add to Wishlist"><i
                                        class="icon an an-heart-o" aria-hidden="true"></i> <span>Add to Wishlist</span></a>
                                <a class="wishlist add-to-compare ms-2" href="#" title="Add to Wishlist"><i
                                        class="icon an an-balance-scale" aria-hidden="true"></i>
                                    <span>Add to Compare</span></a>
                            </div>
                            <div class="share-icon">
                                <span>Share:</span>
                                <ul class="list--inline social-icons">
                                    <li><a href="#"><i class="icon an an-facebook-f"></i></a></li>
                                    <li><a href="#"><i class="icon an an-twitter"></i></a></li>
                                    <li><a href="#"><i class="icon an an-pinterest-p"></i></a></li>
                                    <li><a href="#"><i class="icon an an-instagram"></i></a></li>
                                    <li><a href="#"><i class="icon an an-youtube"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--End Quickview Modal-->

    <!-- Start Addtocart Added Popup -->
    <div class="modal fade" id="pro-addtocart-popup" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                            <div class="addtocart-inner text-center clearfix">
                                <h4 class="title">Added to your shopping cart successfully.</h4>
                                <div class="pro-img mb-2">
                                    <img class="img-fluid blur-up lazyload"
                                         src="assets/images/product-images/addtocart-popup-img.jpg"
                                         data-src="assets/images/product-images/addtocart-popup-img.jpg"
                                         alt="Added to your shopping cart successfully."
                                         title="Added to your shopping cart successfully."/>
                                </div>
                                <div class="pro-details">
                                    <p class="pro-name mb-1">Mobile Galaxy S6 Edge</p>
                                    <p class="sku mb-0">Color: Gray</p>
                                    <p class="mb-0 qty-total">1 X $113.88</p>
                                    <div class="addcart-total mt-3 mb-3">
                                        Total: <b class="price">$113.88</b>
                                    </div>
                                    <div class="button-action">
                                        <a href="checkout-style1.html" class="btn btn-primary view-cart mx-1">Go To
                                            Checkout</a>
                                        <a href="index.html" class="btn btn-secondary">Continue Shopping</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Addtocart Added Popup -->

    <!-- Including Jquery -->
    <script th:src="@{/assets/js/vendor/jquery-3.3.1.min.js}"></script>
    <script th:src="@{/assets/js/vendor/js.cookie.js}"></script>
    <!--Including Javascript-->
    <script th:src="@{/assets/js/plugins.js}"></script>
    <script th:src="@{/assets/js/main.js}"></script>
    <!--引入layui.js-->
    <script th:src="@{/assets/lib/layui/layui.js}"></script>


    <!-- Photoswipe Gallery -->
    <script th:src="@{/assets/js/vendor/photoswipe.min.js}"></script>




    <script>
        $(function () {
            var $pswp = $('.pswp')[0],
                image = [],
                getItems = function () {
                    var items = [];
                    $('.lightboximages a').each(function () {
                        var $href = $(this).attr('href'),
                            $size = $(this).data('size').split('x'),
                            item = {
                                src: $href,
                                w: $size[0],
                                h: $size[1]
                            }
                        items.push(item);
                    });
                    return items;
                }
            var items = getItems();

            $.each(items, function (index, value) {
                image[index] = new Image();
                image[index].src = value['src'];
            });
            $('.prlightbox').on('click', function (event) {
                event.preventDefault();

                var $index = $(".active-thumb").parent().attr('data-slick-index');
                $index++;
                $index = $index - 1;

                var options = {
                    index: $index,
                    bgOpacity: 0.9,
                    showHideOpacity: true
                }
                var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);
                lightBox.init();
            });


        });
    </script>

    <script th:inline="javascript">
        //上下文路径
        let ctx = /*[[@{/}]]*/"";
        if (ctx.endsWith("/")) {
            ctx = ctx.substring(0, ctx.length - 1);
        }

        //添加到购物车
        $("#addToCartBtn").click(function () {
            let url = ctx + "/cart";
            //商品编号
            let goodId = /*[[${good.id}]]*/"";
            let qty = $(":input[name=quantity]").val();

            $.ajax({
                url,
                method: "post",
                data: {
                    goodId,
                    qty
                },
                success(resp) {
                    if (resp.success) {
                        layer.msg("添加到购物车成功");
                    } else {
                        layer.msg("添加到购物车失败");
                    }
                },
                error(resp) {
                    if (resp.status === 401) {
                        location.href = ctx + "/login";
                    }
                }
            });
        });

        //秒杀按钮
        $("#seckillBtn").click(function () {
            let url = ctx + "/order/seckill";
            //商品编号
            let goodId = /*[[${good.id}]]*/"";

            $.ajax({
                url,
                method: "post",
                data: {
                    goodId
                },
                success(resp) {
                    if (resp.success) {
                        layer.msg("秒杀成功", {
                            time: 500
                        }, function () {
                            //等到订单创建完成
                            let seckillId = resp.data;//秒杀单号
                            //轮询
                            let duration = Math.floor(Math.random() * 100) + 400;
                            setTimeout(function () {
                                checkIfOrderCreated(seckillId);
                            }, duration);
                        });
                    } else {
                        layer.msg(resp.msg || "秒杀失败");
                    }
                },
                error(resp) {
                    if (resp.status === 401) {
                        location.href = ctx + "/login";
                    }
                }
            });
        });

        //检查订单是否已创建
        function checkIfOrderCreated(seckillNo) {
            let url = ctx + "/order/check_order_created"
            $.ajax({
                url,
                method: "get",
                data: {
                    seckillNo
                },
                success(resp) {
                    if (resp.success) {
                        location.href = ctx + "/prepare_checkout?orderId=" + resp.data;
                    } else {
                        if (resp.msg) {
                            layer.msg(msg);
                        } else {
                            let duration = Math.floor(Math.random() * 100) + 400;
                            setTimeout(function () {
                                checkIfOrderCreated(seckillNo);
                            }, duration);
                        }
                    }
                }
            });


        }
    </script>

    <!-- 购物车功能JavaScript -->
    <script>
        $(document).ready(function() {
            // 添加到购物车
            $('.btn-addtocart').click(function() {
                var productId = $('input[name="productId"]').val() || $('#productId').val() || getUrlParam('id');
                var quantity = $('.product-form .qty').val() || 1;
                
                if (!productId) {
                    layer.msg('商品信息错误');
                    return;
                }
                
                $.ajax({
                    url: '/cart/add',
                    type: 'POST',
                    data: {
                        productId: productId,
                        quantity: quantity
                    },
                    dataType: 'json',
                    success: function(result) {
                        if (result.success) {
                            layer.msg('添加成功！', {icon: 1, time: 2000});
                            // 更新购物车数量显示
                            updateCartCount();
                        } else {
                            layer.msg(result.msg || '添加失败', {icon: 2});
                        }
                    },
                    error: function() {
                        layer.msg('网络异常，请稍后重试', {icon: 2});
                    }
                });
            });
            
            // 立即购买
            $('.btn-buynow').click(function() {
                var productId = $('input[name="productId"]').val() || $('#productId').val() || getUrlParam('id');
                var quantity = $('.product-form .qty').val() || 1;
                
                if (!productId) {
                    layer.msg('商品信息错误');
                    return;
                }
                
                // 先添加到购物车，然后跳转到结账页面
                $.ajax({
                    url: '/cart/add',
                    type: 'POST',
                    data: {
                        productId: productId,
                        quantity: quantity
                    },
                    dataType: 'json',
                    success: function(result) {
                        if (result.success) {
                            window.location.href = '/checkout';
                        } else {
                            layer.msg(result.msg || '操作失败', {icon: 2});
                        }
                    },
                    error: function() {
                        layer.msg('网络异常，请稍后重试', {icon: 2});
                    }
                });
            });
        });
        
        // 获取URL参数
        function getUrlParam(name) {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get(name);
        }
        
        // 更新购物车数量显示
        function updateCartCount() {
            // 这里可以添加更新购物车数量的逻辑
            var currentCount = parseInt($('.cart-count').text()) || 0;
            $('.cart-count').text(currentCount + 1);
        }
    </script>

    <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="pswp__bg"></div>
        <div class="pswp__scroll-wrap">
            <div class="pswp__container">
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
            </div>
            <div class="pswp__ui pswp__ui--hidden">
                <div class="pswp__top-bar">
                    <div class="pswp__counter"></div>
                    <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                    <button class="pswp__button pswp__button--share" title="Share"></button>
                    <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                    <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                    <div class="pswp__preloader">
                        <div class="pswp__preloader__icn">
                            <div class="pswp__preloader__cut">
                                <div class="pswp__preloader__donut"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                    <div class="pswp__share-tooltip"></div>
                </div>
                <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
                <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
                <div class="pswp__caption">
                    <div class="pswp__caption__center"></div>
                </div>
            </div>
        </div>
    </div>

</div>
</body>
</html>
